<template>
	<view>
		<uv-navbar leftText="返回" title="医生" @leftClick="backClick"></uv-navbar>
		
		<view class="settings">
			<view v-if="users_data.length > 0">
				<uv-cell-group :border="false">
					<uv-cell v-for="item, index in users_data" :key="index" :isLink="userinfo.userId === item.userId?false:true" :cellStyle="{padding: '15px 15px'}" @click="userinfo.userId === item.userId?'':changeClick(item._id, item.userId)">
						<!-- 自定义左侧标题 -->
						<template v-slot:title>
							<uv-text :text="item.users[0].name"></uv-text>
						</template>
						<!-- 自定义右侧值 -->
						<template v-slot:value>
							<text v-if="userinfo.userId !== item.userId" style="color: rgba(0, 0, 0, 0.4);">{{ item.users[0].mobile }}</text>
							<uv-text v-else text="保留" type="info"></uv-text>
						</template>
					</uv-cell>
				</uv-cell-group>
			</view>
			
			<view v-else ><uv-empty mode="data" text="暂无医生数据"></uv-empty></view>
		</view>
		<uv-modal ref="modal" title="诊所关联" showCancelButton confirmColor="#2c9c3c" @confirm="confirm">
			<uv-checkbox-group 
				v-model="checkboxValue" 
				activeColor="#2c9c3c"
				iconPlacement="right"
				placement="column"
				labelSize="15"
				borderBottom
				>
				<uv-checkbox v-for="item, index in checkboxClinicList" :key="index" :name="item._id" size='30' customStyle="margin-top: 15px">
					{{ item.clinic }}
					<view style="color: rgba(0, 0, 0, 0.4);font-size: 28rpx;">{{ item.address }}</view>
				</uv-checkbox>
			</uv-checkbox-group>
		</uv-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				delete_id: null,
				users_id: null,
				userinfo: null,
				change_users_id: null,
				checkboxClinicList: [],
				checkboxValueBackup: [],
				checkboxValue: [],
				users_data: []
			}
		},
		created() {
			uni.showLoading({ title: '加载中...' })
			this.userinfo = this.$store.state.userinfo
			this.checkboxClinicList = this.userinfo.clinic_data_all
			this.get_users_data()
		},
		methods: {
			backClick() {
				uni.navigateBack();
			},
			get_users_data() {
				this.$api.get_user_clinic({ types: 1, clinic_id_list: this.userinfo.clinic_id_list }).then((res) => {
					this.users_data = res.data
					uni.hideLoading()
				})
			},
			changeClick(resId, userId) {
				this.delete_id = resId
				this.users_id = userId
				for (let i = 0; i < this.users_data.length; i++) {
					if ( userId === this.users_data[i].userId ) {
						this.checkboxValue = this.users_data[i].clinic
						break
					}
				}
				this.$refs.modal.open();
			},
			confirm() {
				uni.showLoading()
				this.$api.change_user_clinic({ 
					_id: this.delete_id, 
					refer_clinic_id: this.userinfo.clinic_id_list, 
					clinic_id_list: this.checkboxValue ,
				}).then((res) => {
					for (let i = 0; i < this.users_data.length; i++) {
						if ( this.users_id === this.users_data[i].userId ) {
							this.users_data[i].clinic = res.data
							const newElements = this.users_data[i].clinic.filter(item => !this.userinfo.clinic_id_list.includes(item))
							if ( res.data.length === 0 || res.data.length === newElements.length ) {
								this.users_data.splice(i, 1)
							}
							break
						}
					}
					
					uni.showToast({
						title: '操作成功',
						icon:'success'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.settings {
		margin-top: 180rpx;
	}

</style>
